import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import MyScroll from '../../components/MyScroll/MyScroll';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import {routerRedux} from "dva/router";
import {distribution,distributionSearch,tianjiaGoods,myStorea} from './distribution.less';
import DistributionItem from "./distributionItem";
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import storeShare from '../../assets/svg/storeShare.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import {myHead, myHeadTwo} from "../my/myHeader.less";

const Item = Popover.Item;




class ReportDetail extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:true,
            value:""
        };

        this.AlloyTouch = null;

    }

    componentDidMount(){
       this.props.dispatch({type:"distribution/reportDetailEFF"})
    }



    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };


    today=(e)=>{
            e.target.setAttribute("class","today");
            this.setState({
                modal:true
            })
            for(let i=0;i<this.siblings(e.target).length;i++){
                this.siblings(e.target)[i].setAttribute("class","yesterday");
            }
    }
    yesterday=(e)=>{
        e.target.setAttribute("class","today");
        this.setState({
            modal:false
        })
        for(let i=0;i<this.siblings(e.target).length;i++){
            this.siblings(e.target)[i].setAttribute("class","yesterday");
        }
    }
    siblings=(elm)=> {
        let a = [];
        let p = elm.parentNode.children;
        for(let i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
    }
    render() {
        const {dispatch,distribution} = this.props;
        const {reportDetailList={}} = this.props.distribution;
        console.log(this.state.modal)
        return ( <Flex direction="column" className={distributionSearch} style={{height:"100%" ,position:'relative',}}>
                <div className={myStorea}>
                    <WingBlank>
                        <Flex justify="between" className="header_icon">
                            <Icon type="left" style={{color:"#fff",width:".5rem",height:".5rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.goBack());
                            }}></Icon>
                            <div style={{color:"#fff",fontSize:".3rem"}}>详细报表</div>
                            <Icon type={storeShare.id} style={{opacity:"0"}}></Icon>
                        </Flex>
                        <Flex style={{paddingBottom:".3rem"}}>
                            <div className="tixian" style={{borderRight:"1px solid #e5e5e5"}}>
                                <div>可提现金额</div>
                                <div style={{margin:".3rem 0"}}><span style={{fontSize:".48rem"}}>{reportDetailList.accountBalance||0 }</span>元</div>
                                <div className="gotixian" onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/putForward`
                                    }))
                                }}>去提现</div>
                            </div>
                            <div className="tixian">
                                <div>已收入提成</div>
                                <div style={{margin:".3rem 0"}}><span style={{fontSize:".48rem"}}>{reportDetailList.finishCommission||0}</span>元</div>
                                <div className="gotixian" onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/distribution`
                                    }))
                                }}>去赚钱</div>
                            </div>
                        </Flex>
                    </WingBlank>
                </div>
                <MyScroll aa={true}>
                    <Flex style={{padding:".3rem 0",width:"100%",background:"#fff"}}>
                        <Flex style={{width:"50%"}} justify="center">
                            <div className="shang">上</div>
                            <div>
                                <div style={{color:"#999",marginBottom:".1rem"}}>上月收入</div>
                                <div style={{fontWeight:"bold",fontSize:".3rem"}}>¥{reportDetailList.lastMonthCommission||0 }</div>
                            </div>
                        </Flex>
                        <Flex style={{width:"50%"}} justify="center">
                            <div className="shang">本</div>
                            <div>
                                <div style={{color:"#999",marginBottom:".1rem"}}>本月收入</div>
                                <div style={{fontWeight:"bold",fontSize:".3rem"}}>¥{reportDetailList.thisMonthCommission||0 }</div>
                            </div>
                        </Flex>
                    </Flex>
                    <div style={{background:"#fff",padding:".3rem 0",width:"100%",margin:".2rem 0"}}>
                        <WingBlank>
                            <Flex justify="between">
                                <Flex>
                                    <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                                    <div style={{fontSize:".35rem"}}>最近收支详情</div>
                                </Flex>
                                <div style={{width:".5rem",height:".5rem"}}>
                                    <Icon type="right" style={{width:"100%",height:"100%"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/cashDetail`
                                        }))
                                    }}></Icon>
                                </div>

                            </Flex>
                            {reportDetailList.incomeDetailList&&reportDetailList.incomeDetailList.map((v,i)=>{
                                return <Flex key={i} justify="between" style={i==reportDetailList.incomeDetailList.length-1?{padding:".3rem"}:{padding:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                    <div>
                                        <div style={{marginBottom:".2rem"}}>{v.type==1?"一级佣金":v.type==2?"二级佣金":v.type==3?"三级佣金":v.type==4?"佣金提现-平台审核中":v.type==5?"佣金提现-已转入账户余额":""}</div>
                                        <div style={{color:"#999"}}>{v.timeStr}</div>
                                    </div>
                                    <div style={{textAlign:"right"}}>
                                        <div style={v.type==4||v.type==5?{marginBottom:".2rem"}:{marginBottom:".2rem",color:"#ff0036"}}>
                                            {v.type==4||v.type==5?"-"+v.amount :"+"+v.amount }
                                        </div>
                                        <div style={{color:"#999"}}>
                                            {v.typeDescription }
                                        </div>
                                    </div>
                                </Flex>
                            })}

                        </WingBlank>
                    </div>
                    <div style={{background:"#fff",padding:".3rem 0",width:"100%",margin:".2rem 0"}}>
                        <WingBlank>
                            <Flex justify="between">
                                <Flex>
                                    <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                                    <div style={{fontSize:".35rem"}}>更多统计数据</div>
                                </Flex>
                                <div style={{width:".5rem",height:".5rem"}}>
                                    <Icon type="right" style={{width:"100%",height:"100%"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/report`
                                        }))
                                    }}></Icon>
                                </div>

                            </Flex>
                            <Flex style={{margin:".3rem 0"}}>
                                <div className="today" style={{marginRight:".2rem"}} onClick={this.today}>今日</div>
                                <div className="yesterday" onClick={this.yesterday}>昨日</div>
                            </Flex>
                            {reportDetailList.todayStatisticsVo?this.state.modal? <Flex justify="between" style={{padding:".2rem 0"}}>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>点击数</div>
                                    <div style={{fontSize:".3rem"}}>{reportDetailList.todayStatisticsVo.click||0}</div>
                                </div>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>订单数量</div>
                                    <div style={{fontSize:".3rem"}}>{reportDetailList.todayStatisticsVo.orderCount||0}</div>
                                </div>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>佣金</div>
                                    <div style={{fontSize:".3rem"}}>¥{reportDetailList.todayStatisticsVo.commissionAmount||0}</div>
                                </div>
                            </Flex>: <Flex justify="between" style={{padding:".2rem 0"}}>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>点击数</div>
                                    <div style={{fontSize:".3rem"}}>{reportDetailList.yesterdayStatisticsVo.click||0}</div>
                                </div>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>订单数量</div>
                                    <div style={{fontSize:".3rem"}}>{reportDetailList.yesterdayStatisticsVo.orderCount||0}</div>
                                </div>
                                <div style={{textAlign:"center",width:"33%"}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>佣金</div>
                                    <div style={{fontSize:".3rem"}}>¥{reportDetailList.yesterdayStatisticsVo.commissionAmount||0}</div>
                                </div>
                            </Flex>:""}

                        </WingBlank>
                    </div>
                    <div style={{background:"#fff",padding:".3rem 0",width:"100%",margin:".2rem 0"}}>
                        <WingBlank>
                            <Flex justify="between">
                                <Flex>
                                    <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                                    <div style={{fontSize:".35rem"}}>订单明细</div>
                                </Flex>
                                <div style={{width:".5rem",height:".5rem"}}>
                                    <Icon type="right" style={{width:"100%",height:"100%"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname:`/myDistributionOrder`
                                        }))
                                    }}></Icon>
                                </div>

                            </Flex>
                            {reportDetailList.commissionDetail&&<div>
                                <div style={{borderBottom:"1px solid #e5e5e5",padding:'.3rem .8rem'}}>
                                    <div style={{color:"#999",marginBottom:".1rem"}}>总收益</div>
                                    <div style={{fontSize:".3rem"}}>¥{reportDetailList.commissionDetail.totalAmount||0}</div>
                                </div>
                                <Flex justify="between" style={{padding:".2rem 0"}}>
                                    <div style={{textAlign:"center",width:"33%"}}>
                                        <div style={{color:"#999",marginBottom:".1rem"}}>待收益</div>
                                        <div style={{fontSize:".3rem"}}>¥{reportDetailList.commissionDetail.estimatedAmount ||0}</div>
                                    </div>
                                    <div style={{textAlign:"center",width:"33%"}}>
                                        <div style={{color:"#999",marginBottom:".1rem"}}>完成订单</div>
                                        <div style={{fontSize:".3rem"}}>{reportDetailList.commissionDetail.finishedOrderCount ||0} <span tyle={{fontSize:".25rem"}}>单</span>    </div>
                                    </div>
                                    <div style={{textAlign:"center",width:"33%"}}>
                                        <div style={{color:"#999",marginBottom:".1rem"}}>交易中订单</div>
                                        <div style={{fontSize:".3rem"}}>{reportDetailList.commissionDetail.nogoingOrderCount ||0} <span tyle={{fontSize:".25rem"}}>单</span> </div>
                                    </div>
                                </Flex>
                            </div>}

                        </WingBlank>
                    </div>
                </MyScroll>

            </Flex>

        )


    }
}

export default connect(({ distribution }) => ({ distribution}))(ReportDetail);